/*
 * @Description: 线路公告模块
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:53:52
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:53:52
 */
<template>
  <div
    class="flex-h fontsize28 bus-notice-wrapper"
    @click="goToNoticeList"
  >
    <img src="./img/notice.png">
    <slick
      ref="slick"
      :options="slickOptions"
      v-if="this.noticeList.length>0"
      class="bus-notice-slick-wrapper"
    >
      <!-- class="flex1" -->
      <!-- 为了flex的样式不被覆盖添加的div -->
      <div
        v-for="(item,index) in noticeList"
        :key="`notice_${index}`"
      >
        <div class="flex-h flex-vc bus-notice-item">
          <p class="flex1">{{item.title}}</p>
          <span>{{item.time|timeFormat}}</span>
        </div>
      </div>
    </slick>
    <div
      v-else
      class="no-notice"
    >{{appName}}，必不可少的生活方式。</div>
  </div>
</template>

<script>
import Slick from 'vue-slick'
import { dateFtt } from 'vue-xiaobu-utils'
import { getBusLineNoticeList } from './api.js'
export default {
  components: {
    'slick': Slick
  },
  data() {
    return {
      slickOptions: {
        slidesToShow: 1,
        vertical: true,
        accessibility: true,
        arrows: false,
        dots: false,
        centerMode: true,
        centerPadding: '0px',
        autoplay: true,
        infinite: true
      },
      appName: window.cityappname,
      noticeList: []
    }
  },
  filters: {
    timeFormat(dateStr) {
      // 传入的时间字符转换为Date格式，
      // ios中new Date()时不能含有'-'
      let date = new Date(dateStr.replace(/-/g, '/'))
      let nowDate = new Date() // 当前的时间
      let diffMill = nowDate.getTime() - date.getTime() // 当前时间和公告时间的毫秒差
      let isBefore = diffMill > 0 // 公告是否在当前时间之前
      let diffHours = ((diffMill) / (3600 * 1000)).toFixed(0) // 当前时间和公告时间的小时差

      diffHours = Math.abs(diffHours) // 取绝对值
      if (dateFtt('yyyy-MM-dd', date) === dateFtt('yyyy-MM-dd', nowDate)) {
        // 今天
        if (diffHours >= 1) {
          // 超过1小时
          return diffHours + '小时' + (isBefore ? '前' : '后')
        } else {
          // 1小时内的处理
          let diffMin = ((nowDate.getTime() - date.getTime()) / (60 * 1000)).toFixed(0)
          if (diffMin < 30) {
            // 30分钟的处理
            return isBefore ? '刚刚' : '立刻'
          } else {
            return '半小时' + (isBefore ? '前' : '后')
          }
        }
      } else {
        if (diffHours < 24) {
          // 昨天和今天的处理
          return isBefore ? '昨天' : '明天'
        } else {
          // 超过1天
          if (date.getFullYear() === nowDate.getFullYear()) {
            return dateFtt('MM-dd', date)
          } else {
            return dateFtt('yyyy-MM-dd', date)
          }
        }
      }
    }
  },
  mounted() {
    this.getList()

    document.addEventListener(
      'resume',
      () => {
        // 开始轮播
        if (this.$refs.slick) {
          this.$refs.slick.play()
        }
      },
      false
    )
    document.addEventListener(
      'pause',
      () => {
        // 停止轮播
        if (this.$refs.slick) {
          this.$refs.slick.pause()
        }
      },
      false
    )
  },
  methods: {
    getList() {
      getBusLineNoticeList(res => {
        // 走缓存的数据，缓存和正常结果返回都会通过这个回调函数返回
        this.noticeList = []
        this.$nextTick(() => {
          this.noticeList = res
          if (this.$refs.slick) {
            this.$refs.slick.reSlick()
          }
        })
      }).then(res => {
        // 这里返回的只是一个结果true
      }).catch(() => { })
    },
    goToNoticeList() {
      // 跳转到公告列表
      window.location.assign('xbapp://open/city-app/linenoticelist.html')
    }
  }
}
</script>

<style scoped>
.bus-notice-wrapper {
  height: 72px;
  margin: 32px;
  border-radius: 25px; /* no */
  background-color: #f2f5f6;
}
.bus-notice-wrapper > img {
  width: 56px;
  height: 58px;
  margin: 8px 10px 8px 16px;
}
.bus-notice-slick-wrapper {
  width: 598px;
  height: 72px;
  line-height: 72px;
  overflow: hidden;
}
.bus-notice-item {
  /* width: 598px; */
  height: 72px;
  color: #333333;
}
.bus-notice-item > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*padding-right: 15px;*/
}
.bus-notice-item > span {
  padding: 0 16px;
  color: #aaaaaa;
  font-size: 22px; /*px*/
}
.no-notice {
  height: 72px;
  line-height: 72px;
  color: #999999;
}
</style>
